Adaptive user interface for a multimedia creative design system

ABSTRACT

A method for a website building system includes analyzing a user selected portion of a website for editing to determine an editable subset of components. The website includes a multiplicity of pages in a page-based user interface, where the page-based user interface enables editing of the components and where a multi-page container component includes at least one mini-page and a single page container component is empty or includes at least one component. For a non-empty single page container component of said editable subset of components, the method includes placing components contained in the single page container component into a parent page previously containing the single page container component, resulting in an updated page-based hierarchy for the editable subset components.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is a continuation application of U.S. patentapplication Ser. No. 16/186,616, filed 12 Nov. 2018 which is acontinuation application of U.S. patent application Ser. No. 13/596,146,filed 28 Aug. 2012, which claims benefit from U.S. Provisional PatentApplication No. 61/573,087, filed 31 Aug. 2011, all of which are herebyincorporated in their entirety by reference.

FIELD OF THE INVENTION

The present invention relates generally to graphical applications andcreations.

BACKGROUND OF THE INVENTION

There are many tools on the market today for creating graphicalapplications such as websites, catalogs and e-shops. These applicationsusually allow a user to create the website from scratch or may employthe use of predefined templates provided to the user by the systemcreator or alternatively by a user community. These templates canusually be edited at will by adding, removing or modifying differentelements.

These applications usually consist of multiple pages and mini pages.Each page typically has multiple properties such as size, name,background color, etc. In addition, these pages may also containelements including components which may be containers i.e., containingmultiple other components, or atomic, i.e. modifiable but not containingother components. Components typically have property sheets which allowthe user to control the multiple properties associated with thecomponent such as appearance effects, text color etc. The appearance andbehavior of components can also be modified by various modifiers such asblurring and animation. Components may be fixed i.e. have a givengeometrical shape, be based on a content management system (CMS) (suchas a component containing a picture selected from a database) or may beuser-specified such as a text area where a user may enter text.Containers may also be based on external information such as a ReallySimple Syndication (RSS) feed displaying information from an externaldata source or the content of a given internet page.

Container components may be nested at a number of levels or may belimited to contain specific types or classes of data (such as a photoalbum container which may only contain certain formats of pictures).They also may be multi-page in nature with each container containingmultiple pages which occupy the same screen area, but with only one ofthe pages actually displayed at any given moment. Container componentsmay also provide the means for a user to move between different pagesthrough the use of contained components such as navigation buttons.

Components do not necessarily have to occupy mutually exclusive screenregions and may geometrically intersect each other. A component may alsobe situated completely within the boundaries of another component. Thecomponents inside a particular container are always contained within theboundaries of the pertinent container. If the container is moved, itwould move with the components logically contained in it, but the movewould exclude components which merely lay inside the region of thecontainer but were not logically contained in it.

Editing of the graphical application and its components is typicallyperformed via a graphical user interface (GUI) which may include acomponent menu, the current page working area and a page manager. Thecomponent menu is automatically created based on the componentsavailable in the content management system (CMS). Once a component isselected, it can be dragged and dropped into the working area.

Reference is now made to FIG. 1 which illustrates a typical GUI 5 forediting a website. As is shown, part of the component menu may includean icon for clip art 8. When the clip art icon 8 is selected, the useris given a new sub-menu with options for new components such as shapes,lines, animations etc. These different components in turn, may befurther opened up to show, for example, all the shape components 9available to the user in the content manager system (CMS). Once acomponent has been selected, it can be dragged and dropped into aworking area, rotated, resized etc.

SUMMARY OF THE PRESENT INVENTION

There is provided, in accordance with a preferred embodiment of thepresent invention, a method for a website building system (WBS)implementable on a computing device. The method includes analyzing auser selected portion of a website for editing to determine an editablesubset of components. The website includes a multiplicity of pages in apage-based user interface, where the page-based user interface enablesediting of the components and where a multi-page container componentincludes at least one mini-page and a single page container component isempty or comprises at least one component. For a non-empty single pagecontainer component of the editable subset of components, the methodalso includes placing components contained in the single page containercomponent into a parent page previously containing single page containercomponent, resulting in an updated page-based hierarchy for the editablesubset components.

Moreover, in accordance with a preferred embodiment of the presentinvention, the website is one of a catalog and an e-shop.

Further, in accordance with a preferred embodiment of the presentinvention, the method also includes filtering the editable subsetcomponents for relevance.

Still further, in accordance with a preferred embodiment of the presentinvention, the analyzing includes scanning a single page at a time.

Additionally, in accordance with a preferred embodiment of the presentinvention, the analyzing includes scanning page groups.

Moreover, in accordance with a preferred embodiment of the presentinvention, the scanning does not scan non-container components.

BRIEF DESCRIPTION OF THE DRAWINGS

The subject matter regarded as the invention is particularly pointed outand distinctly claimed in the concluding portion of the specification.The invention, however, both as to organization and method of operation,together with objects, features, and advantages thereof, may best beunderstood by reference to the following detailed description when readwith the accompanying drawings in which:

FIG. 1 is an illustration of a typical GUI (graphical user interface)for editing a website;

FIG. 2 is an exemplary illustration of an edited website using the GUIof FIG. 1;

FIG. 3 is a schematic illustration of a webpage and components in amini-page of the webpage;

FIGS. 4A and 4B are schematic illustrations of different views of atypical page-based hierarchical website;

FIG. 5 is a schematic diagram of a conversion system for converting theelements of a page based hierarchy into a linear hierarchy, constructedand operative in accordance with the present invention;

FIG. 6 is an algorithm of the functionality of a component analyzerforming part of the system of FIG. 5, constructed and operative inaccordance with the present invention;

FIG. 7 is a schematic illustration of the creation of menus andcomponent sets for the page-based hierarchy of FIGS. 4A and 4B;

FIG. 8 is a schematic illustration of the process of flattening singlepage containers, useful in the system of FIG. 5;

FIG. 9 is an algorithm of the functionality of an indexer forming partof the system of FIG. 5;

FIG. 10 is a schematic illustration useful in understanding the conceptof adjacency; and

FIG. 11 is a schematic illustration of a linear hierarchical viewincluding a linear view simplified property sheet, constructed andoperative in accordance with the present invention.

It will be appreciated that for simplicity and clarity of illustration,elements shown in the figures have not necessarily been drawn to scale.For example, the dimensions of some of the elements may be exaggeratedrelative to other elements for clarity. Further, where consideredappropriate, reference numerals may be repeated among the figures toindicate corresponding or analogous elements.

DETAILED DESCRIPTION OF THE PRESENT INVENTION

In the following detailed description, numerous specific details are setforth in order to provide a thorough understanding of the invention.However, it will be understood by those skilled in the art that thepresent invention may be practiced without these specific details. Inother instances, well-known methods, procedures, and components have notbeen described in detail so as not to obscure the present invention.

When creating a graphical application based on a template, or editingpreviously created applications, a user may probably need to makemodifications to the visual design or replace the internal content ofnumerous components such as text that is displayed or pictures etc. Forexample, when building a website, components that will have text in themoften begin with dummy text which serves as a place holder only. Editingof the content is usually performed in place and inside the same screenarea occupied by the component, using the display properties of thecomponents (such as color, font etc.).

Reference is now made to FIG. 2 which illustrates an in-place contentand component arrangement 12. As can be seen, the desired screen areafor editing, such as the business menu 15, may be obscured or difficultto locate. This may be due to multiple reasons, such as the size of thearea allocated to the component, its physical location, the ability ofcomponents to hide or overlap each other, etc.

Moreover, the arrangement of components within the website may bemultidimensional, having both horizontal and vertical locations and aswell as a tree structured containment relationship, based on the use ofvarious container components. Reference is now made to FIG. 3 whichillustrates the different levels of such a multidimensional order.Container 16 may contain a 3 page multi-page container 17 whose secondpage 18 may contain the component 19 to be edited. Page 18 is shownexpanded and illustrates how component 19 may be obscured by component20. A user may need to maneuver between different components 16, 17, 18etc. until he arrives at the component 19 that allows him to edit histext.

It will also be appreciated, that when editing or updating such anapplication, not all components need to be modified (such as navigationelements). These components may still reside in the same area as thecomponents that do require editing, possibly hiding them, intersectingwith them or merely obscuring them from being found.

Applicants have realized that, to the builder of a graphical application(such as a website), editing a template that is either manufacturergiven or self-created and which may contain multiple pages andcomponents, may become a tedious and frustrating task when using thestandard GUI provided with the application. Applicants have furtherrealized that the page based hierarchical view of the website asdescribed hereinabove, known from herein as a page view, may beconverted into a flatter linear hierarchical view of components, fromherein known as linear view which, together with an alternative GUI, maybe more user friendly and easier to use.

Reference is now made to FIG. 4A which illustrates a typical page basedhierarchy 100. An application may contain multiple pages A1 and A2. PageA2 may contain a multi-page container component X containing mini pagesB1, B2, and B3. Within the mini pages B1, B2 and B3, the components maybe further nested such as B1:1, B1:2 etc. In accordance with anembodiment of the present invention, Applicant has realized that thepage-based hierarchy 100 of FIG. 4A which may have a GUI which may offera page view of the pertinent components may be flattened into a morelinear view with a menu of ordered components based on their physicallocation within the website. This menu may be a natural visual order asis shown in FIG. 4B.

As is illustrated in FIG. 4B, the pages and components A1 . . . C1 andcorresponding components B1:1 and B1:2 etc. which may belong todifferent pages and mini-pages within page-based hierarchy 100, maybeconverted into a simpler linear view of components sorted and nested asthey appear on the website. Applicant has further realized that thisordered tree of components, from herein known as express mode menu tree(EMMT) 200, together with an appropriate GUI 50, may allow for a userfriendlier method of editing the website. GUI 50 is described in furtherdetail herein below.

It will be appreciated that EMMT 200 may be much simpler than page-basedhierarchy 100 and that it may be based only on the components for whichcontent entry/editing may be required and may not include the componentswhich are not typically part of the content entry process. It will befurther appreciated that EMMT 200 may be dynamically constructed basedon an analysis of the components per page. This analysis may be based onthe geometrical parameters of all the components as well as theircontainment relationship in order to create a logical structure closelyresembling the order in which a user viewing the system would review andread the content of the components in the page. EMMT 200 may alsoprovide simplified property sheets for each component type showing onlythose properties required for the content entry stage.

It will also be appreciated that page-based hierarchy 100 may beconverted into EMMT 200 using an express mode generator (EMG) 60 asillustrated in FIG. 5. EMG 60 may comprise component analyzer 62,indexer 64 and menu builder 66. Component analyzer 62 may analyze thecomponent information to extract only pertinent components and mayflatten and linearize pages where necessary. Component indexer 64 mayindex the components and menu builder 66 may order and create the newEMMT 200. According to an embodiment of the present invention, theresultant EMMT 200 may be executed into the final linear view (GUI 50)by express mode runner (EMR) 70. The functionality of EMR 70 isdescribed in further detail herein below. It will also be appreciatedthat a user may freely switch between the two user interfaces (GUI 10and GUI 50) and their associated menu systems. When switching from GUI10 to GUI 50, EMG 60 may recalculate EMMT 200 based on the changedlayout and arrangement of the components which may result in a differentmenu arrangement created. Therefore a different GUI 50 may be displayedby EMR 70 each time EMG 60 is run.

It will be appreciated that some components may also be pre-classifiedwhen initially building up the application as to whether they need toappear in EMMT 200 and therefore seen in GUI 50 or not. An example ofthis is an arrow shape component for which there is no meaningful usercontent entry.

Reference is now made to FIG. 6 which illustrates the functionality ofcomponent analyzer 62 and indexer 64 as they convert page-basedhierarchy 100 into EMMT 200 for the purpose of data entry/editing. Itwill be appreciated that component analyzer 62 may create a newhierarchical menu (M_(i)) of the components for each page and subpageand that indexer 64 may sort the components within each menu into theirlogical order.

Component analyzer 62 may create (step 1) a new blank linear menu M₁,together with an empty component set C₁ (step 2), starting at the toplevel page of the hierarchy. Component analyzer 62 may then loop througheach individual page, analyzing each page in turn for its components(step 3). If a component is already pre-marked as not required to be inexpress mode, component analyzer 62 may ignore it (step 3a). If acomponent is a single page container, it may be flattened as describedherein below (step 3b). For all other containers, component analyzer 62may loop (step 3ci) recursively, between the different components withina page and through all the sub-pages where pertinent, creating a new submenu M_(i) and an associated component set C_(i) per page (step 3cii).All the components within the pertinent page whether they are regular ormulti-page containers may then be added to the newly created componentset C_(i) (step 3d).

Reference is now made to FIG. 7 which illustrates the creation of menusand component sets for the example of FIG. 4A for the applicationconsisting of pages A1 and A2. Page A1 may be a single page containerand its contents may be flattened as described hereinbelow. A componentset C1 may be created of all the components situated on the page. PageA2 may contain mini-pages B1, B2 and B3. Mini page B1 may containcomponents B1:1, B1:2 etc. Component analyzer 62 may loop recursivelybetween the pages from level to level to create a menu with a set ofcomponents for each level (step 3cii). For example, for page A2, a menuM2 may be created containing mini pages B1, B2 and B3 (set C2). Sincecomponent B1 also contains components B1:1 and B1:2, a new menu M3 iscreated with a component set C3 containing components B1:1 and B1:2.Likewise, a menu M4 may be created for component B2 with a component setof C4 etc. It will be appreciated that where there is nesting of pagesor containers, a menu may be associated with a higher level menu insteadof its component set (step 3ciii). Therefore, M2 maybe associated withA2 instead of its component set C2. Thus a hierarchy of menus may becreated. It will be further appreciated that this hierarchy of menus mayform EMMT 200 and may be eventually generated into GUI 50 as describedherein below.

It will be further appreciated that single page containers may also bepart of the hierarchy. These containers may be “flattened” so that theircontent (atomic components) is regarded as being part of the main pageor the mini page containing them. Reference is now made to FIG. 8 whichillustrates the ‘flattening’ of single page containers. As can be seen,page P1 which contains containers X1 and X2 which further containcomponents Y1, Y2, Z1, Z2, and Z3, may be flattened into one singlecomponent set 120 containing all the components associated with page P1.It will be appreciated that the “flattened” components (Y1, Y2, Z1, Z2,and Z3) may remain in their physical positions' logical order andtherefore may be automatically indexed within their component set.

Once each component set C_(i) has been created, the components withinmay be indexed by indexer 64 (step 4) using the functionality describedherein below. Once indexed, the components in component set C_(i) may bere-arranged in menu M_(i) in order, according to their new indices (step5).

Reference is now made to FIG. 9 which describes how indexer 64 may takethe unordered component set C_(i) and may assign an order index to eachindividual component in a single menu level in a visual reading order.It will be appreciated that each menu level may correspond to a singlepage. It will be further appreciated that indexer 64 may use the conceptof a component adjacency non-commutative relationship. A component B issaid to be adjacent to a component A if a) B is not completely to theright of A nor completely to the left and b) B's top edge is below A'sbottom edge but not more than a predetermined amount of pixels (i.e. aVertical Grouping Threshold). FIG. 10, to which reference is now made,shows a representation of different levels of adjacency. As can be seen,B1, B2 and B3 are adjacent to A but C1, C2, C3 and C4 are not.

Returning to FIG. 9, indexer 64 may use a global order variable indexwhich may be initially set to zero. References to the elements of inputcomponent set C_(i) may be copied into a new candidate set (step 1).From the candidate set, a top left element is selected according to itscoordinates. Indexer 64 may then perform an adjacency test (step 2a). Ifthe element is not adjacent to any other element then it may beconsidered a lead element. If the distance of its upper left corner fromthe common coordinate space is the shortest (i.e. it really is thetopmost left element), then it is assigned (step 2b) the next availableindex number (in this case 0) and is removed from the candidate set. Foreach top left element, indexer 42 may search (step 3) for any adjacentcomponents according to the criteria discussed hereinabove. Onceadjacent elements have been found, they are assigned (step 4) the nextavailable index number and are removed from the candidate set. Eachadjacent element (in turn) may then become (step 5) the current top leftelement and its own adjacent elements are sought out by indexer 64. Thisprocess is repeated recursively until no more adjacent elements may befound. Once there are no more adjacent elements found in the currentloop, the next top left element is found and the process to find anyadjacent elements continues (step 3). The whole process is continueduntil the candidate set is emptied.

It will be appreciated that indexer 64 may index each component setC_(i) as it is created. Once indexer 64 has completed indexing,hierarchical builder 66 may rearrange the newly indexed components incomponent set C according to their new indices and may create the newEMMT 200 according to the menus, sub-menus and component sets that havebeen created.

In an alternative embodiment to the present invention, alternativealgorithms may be used by analyzer 62 in order to create EMMT 200 suchas the following:

An algorithm which only scans a single page at a time, and does nothandle containers within the page (if the system supports them).

An algorithm which scans a single page at a time, and does take intoaccount single page containers.

An algorithm which scans a single page at a time, and handles bothsingle page and multi-page containers.

An algorithm which performs the scan for multiple page groups—be it theentire application or specific page groups within it—and also handlesthe containers (single or multi-page) within the pages.

In alternative embodiments to the current invention, alternativealgorithms may be used to create EMMT 200 based on particular attributesof the components in C1 as described in more detail herein below.

Component type: the algorithm may batch components according to theirtype, so that (for example), the user initially selects for example,pictures into the page and then fills in the text components.

Component “age” in the page: the algorithm may take the sequence inwhich components were added into the page into account. Thus (forexample), components recently added to a page will be placed in EMMT 200after the components previously existing in the page.

Component inheritance history: in systems which support inheritancerelationship between the pages or the components, the algorithm maybatch components inherited from a given template page or componenttogether instead of intermixing them with the specific components addedin a specific page inheriting from the template page or component.

Component size: the algorithm may batch together (for example) thelarger components, and only then may batch the smaller components in thepage.

Component shape: the algorithm may batch components according to theirshape. This may be significant in cases in which the shape may providesubstantial indication as to the use of each component.

Component display priority (z-order): the algorithm may batch componentsaccording to their z-order, so that (for example) components which are“in front” are filled in before the components fully or partiallyoccluded by the components “in front”.

Components' actual usage in the created application: the algorithm maybase the batching of the components on their actual usage information,i.e. which components have been filled with data. This could be done(for example) in a template based system based on the actual usagepattern for the various components in other application pages inheritingfrom the same template as the current page being analyzed.

Components' formatting information: the algorithm may batch togethercomponents based on their formatting information, such as (for example)the style sheet used to format the text in text components inside thepage. This could be based on the specific style selected (e.g. batch allcomponents having the style “heading text”), or on specific propertiesof the style (e.g. batch all components displayed in italics and size 16font).

Actual content of component (e.g. text, picture): the algorithm may usethe actual content of the component to determine their order in EMMT200. For example, components that have a label property may be batchedtogether according to the similarity of the label (e.g. “patient ID”,“patient name” and “patient birth date”).

Native language reading order: the algorithm may take into account thenatural reading order of the language of the specific application orpage in systems built according to an embodiment of the invention whichmay allow multiple language specification at the application or pagelevel. Thus, the natural reading order for pages whose main language isEnglish would be top-to-bottom and then left-to-right, whereas pageswritten in Semitic languages or Far-East languages would use a differentorder.

Inter-page component association: the algorithm may take into accountpre-defined associations between components on the same page. Forexample, a text button component may control the display and hiding of agiven text area component. In one instance of the given page the buttonshould have the text “display license agreement” and the text areashould have the text of the license agreement. In another instance ofthe same page the button should have the text “display product credits”and the text area should have the text of the product credits. Thealgorithm may also use the procedural association between the twocomponents and place them together so that the user would type the textfor the two components in sequence.

User defined hints: a system built according to an embodiment of theinvention may include component properties used specifically to providehints to component analyzer 42. These properties could be specified bythe user preparing a template page, and would later be used by thealgorithm to determine the optimal batching arrangement of thecomponents. For example, in a real-estate application displaying aper-house page, the components containing data related to a house couldbe tagged with a “house” grouping property, and these related to theyard be tagged with a “yard” grouping property. The algorithm may thenuse the information to batch the house-related components together andthe yard-related components together, in order make data entry moreintuitive.

Combined batching criteria: the algorithm may combine any number ofbatching criteria (such as the ones mentioned) using any type ofweighted average formula to create an ordering index for EMMT 200construction. Thus, the algorithm may use (for example) the componentposition together with its type information and information about recentusage to batch together components and specify their order.

It will be appreciated that in this manner, a visual multi-dimensionalhierarchy may be converted into a more linear hierarchical view in orderto facilitate content entry into template design and editing. It will beappreciated that that the completed EMMT 200 may be generated into a GUIby EMR 70. It will further be appreciated that EMR 70 is a parameterizedGUI display sub-system which may display an active GUI based on the datastructure as defined by EMMT 200. It may handle the display of open andclosed menus as well as simplified property sheets and data entry areas.

Reference is now made to FIG. 11 which illustrates how GUI 50 for thenewly created EMMT 200 may appear to a user. The current menu levels aredisplayed and the user may select any menu entry representing acomponent. If the component is a multipage container, the menu entrypoints to the options for the next ‘layer” of menus. If the component isregular, the express mode property sheet for the entry may be openedready for editing. For example, as illustrated in FIG. 11, when the menuis ‘closed’, all that can be seen are the top level components (C10 . .. C50). Once (for example) component C30 has been selected, the expressmode property sheet is opened showing a text entry area, color options,font options, text justification options etc.

In an alternative embodiment to the present invention, the express modeproperty sheet may be located near (such as to the side) of the relevantcomponent and not inside the menu.

Unless specifically stated otherwise, as apparent from the precedingdiscussions, it is appreciated that, throughout the specification,discussions utilizing terms such as “processing,” “computing,”“calculating,” “determining,” or the like, refer to the action and/orprocesses of a computer, computing system, client/server system orsimilar electronic computing device that manipulates and/or transformsdata represented as physical, such as electronic, quantities within thecomputing system's registers and/or memories into other data similarlyrepresented as physical quantities within the computing system'smemories, registers or other such information storage, transmission ordisplay devices.

Embodiments of the present invention may include apparatus forperforming the operations herein. This apparatus may be speciallyconstructed for the desired purposes, or it may comprise ageneral-purpose computer selectively activated or reconfigured by acomputer program stored in the computer. Such a computer program may bestored in a computer readable storage medium, such as, but not limitedto, any type of disk, including floppy disks, optical disks,magnetic-optical disks, read-only memories (ROMs), compact discread-only memories (CD-ROMs), random access memories (RAMs),electrically programmable read-only memories (EPROMs), electricallyerasable and programmable read only memories (EEPROMs), magnetic oroptical cards, Flash memory, or any other type of media suitable forstoring electronic instructions and capable of being coupled to acomputer system bus.

The processes and displays presented herein are not inherently relatedto any particular computer or other apparatus. Various general-purposesystems may be used with programs in accordance with the teachingsherein, or it may prove convenient to construct a more specializedapparatus to perform the desired method. The desired structure for avariety of these systems will appear from the description below. Inaddition, embodiments of the present invention are not described withreference to any particular programming language. It will be appreciatedthat a variety of programming languages may be used to implement theteachings of the invention as described herein.

While certain features of the invention have been illustrated anddescribed herein, many modifications, substitutions, changes, andequivalents will now occur to those of ordinary skill in the art. It is,therefore, to be understood that the appended claims are intended tocover all such modifications and changes as fall within the true spiritof the invention.

What is claimed is:
 1. A method for a website building system (WBS), themethod implementable on a computing device, the method comprising:analyzing a user selected portion of a website for editing to determinean editable subset of components, the website comprising a multiplicityof pages in a page-based user interface, wherein said page-based userinterface enables editing of said components and wherein a multi-pagecontainer component comprises at least one mini-page and a single pagecontainer component is empty or comprises at least one component; andfor a non-empty single page container component of said editable subsetof components, placing components contained in said single pagecontainer component into a parent page previously containing said singlepage container component, resulting in an updated page-based hierarchyfor said editable subset components.
 2. The method according to claim 1wherein said website is one of a catalog and an e-shop.
 3. The methodaccording to claim 1 and also comprising filtering said editable subsetcomponents for relevance.
 4. The method according to claim 1 whereinsaid analyzing comprises scanning a single page at a time.
 5. The methodaccording to claim 1 wherein said analyzing comprises scanning pagegroups.
 6. The method according to claim 4 wherein said scanning doesnot scan non-container components.
 7. The method according to claim 5wherein said scanning does not scan non-container components.